import Vue from 'vue'

const move = Vue.directive('move', {
  inserted: (el, bindings, vnode) => {
    if (!bindings.value) {
      return
    }
    Vue.nextTick(() => {
      const { visible } = vnode.componentInstance
      if (!visible) return
      const modal = el.getElementsByClassName('ant-modal')[0]
      const content = el.getElementsByClassName('ant-modal-content')[0]
      const header = el.getElementsByClassName('ant-modal-header')[0]
      const body = el.getElementsByClassName('ant-modal-body')[0]
      const footer = el.getElementsByClassName('ant-modal-footer')[0]
      const fileView = el.getElementsByClassName('material-ui')[0]
      // 弹框可拉伸最小宽高
      const minWidth = 400
      const minHeight = 300
      // 初始非全屏
      let isFullScreen = false
      // 初始非最小化
      let isMinScreen = false

      // //当前宽高
      let nowWidth = 0
      // //当前顶部高度
      let nowMarginTop = 0
      // 全屏按钮
      content.insertAdjacentHTML(
        'beforeEnd',
        `<button class="ant-modal-max" type="button">
              <span class="ant-modal-close-x"><i aria-label="图标: switcher" class="anticon anticon-switcher"><svg viewBox="64 64 896 896" data-icon="switcher" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M752 240H144c-17.7 0-32 14.3-32 32v608c0 17.7 14.3 32 32 32h608c17.7 0 32-14.3 32-32V272c0-17.7-14.3-32-32-32zm-40 600H184V312h528v528zm168-728H264c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h576v576c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V144c0-17.7-14.3-32-32-32zM300 550h296v64H300z"></path></svg></i></span>
              </button>`
      )
      content.insertAdjacentHTML(
        'beforeEnd',
        `<button class="ant-modal-min" type="button">
              <span class="ant-modal-close-x"><i aria-label="图标: minus" class="anticon anticon-minus"><svg viewBox="64 64 896 896" data-icon="minus" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg></i></span>
              </button>`
      )
      const changeBig = el.querySelector('.ant-modal-max')
      const changeSmall = el.querySelector('.ant-modal-min')
      // 给弹窗加上overflow auto；不然缩小时框内的标签可能超出dialog；
      modal.style.overflow = 'auto'
      // 清除选择头部文字效果
      // header.onselectstart = new Function("return false");
      // 头部加上可拖动cursor
      header.style.cursor = 'move'
      // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
      const sty = modal.currentStyle || window.getComputedStyle(modal, null)
      const moveDown = e => {
        // 鼠标按下，计算当前元素距离可视区的距离
        const disX = e.clientX - header.offsetLeft
        const disY = e.clientY - header.offsetTop
        // 获取到的值带px 正则匹配替换
        let styL, styT
        // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
        if (sty.left.includes('%')) {
          styL =
            +document.body.clientWidth * (+sty.left.replace(/%/g, '') / 100)
          styT =
            +document.body.clientHeight * (+sty.top.replace(/%/g, '') / 100)
        } else {
          styL = +sty.left.replace(/\px/g, '')
          styT = +sty.top.replace(/\px/g, '')
        }
        document.onmousemove = function (e) {
          // 通过事件委托，计算移动的距离
          const l = e.clientX - disX
          const t = e.clientY - disY
          // 移动当前元素
          modal.style.left = `${l + styL}px`
          modal.style.top = `${t + styT}px`
          // 将此时的位置传出去
          // binding.value({x:e.pageX,y:e.pageY})
        }
        document.onmouseup = function (e) {
          document.onmousemove = null
          document.onmouseup = null
        }
      }
      header.onmousedown = moveDown
      // 最大化
      changeBig.onclick = e => {
        isMinScreen = false // 全屏时取消最小化
        body.style.display = 'block'
        if (isFullScreen === false) {
          nowWidth = modal.clientWidth
          nowMarginTop = modal.offsetTop
          modal.style.left = 0
          modal.style.top = 0
          modal.style.width = '100VW'
          modal.style.height = '100VH'
          content.style.height = '100VH'
          fileView.style.height = '95VH'
          modal.style.marginTop = 0
          isFullScreen = true
          header.style.cursor = 'initial'
          header.onmousedown = null
        } else {
          modal.style.width = nowWidth + 'px'
          modal.style.height = 'auto'
          modal.style.top = nowMarginTop + 'px'
          content.style.height = '758px'
          body.style.height = '700px'
          fileView.style.height = '700px'
          isFullScreen = false
          header.style.cursor = 'move'
          header.onmousedown = moveDown
        }
      }

      // 最小化
      changeSmall.onclick = e => {
        if (isMinScreen) {
          isMinScreen = !isMinScreen
          body.style.display = 'block'
          footer.style.display = 'block'
          content.style.height = '758px'
        } else {
          isMinScreen = !isMinScreen
          body.style.display = 'none'
          footer.style.display = 'none'
          content.style.height = '55px'
        }
      }
      modal.onmousemove = function (e) {
        if (
          e.clientX > modal.offsetLeft + modal.clientWidth - 10 ||
          modal.offsetLeft + 10 > e.clientX
        ) {
          modal.style.cursor = 'w-resize'
        } else if (
          el.scrollTop + e.clientY >
          modal.offsetTop + modal.clientHeight - 30
        ) {
          modal.style.cursor = 's-resize'
        } else {
          modal.style.cursor = 'default'
          modal.onmousedown = null
        }
        modal.onmousedown = e => {
          const clientX = e.clientX
          const clientY = e.clientY
          const elW = modal.clientWidth
          const elH = modal.clientHeight
          const EloffsetLeft = modal.offsetLeft
          const EloffsetTop = modal.offsetTop
          modal.style.userSelect = 'none'
          const ELscrollTop = el.scrollTop
          // 判断点击的位置是不是为头部
          if (
            clientX > EloffsetLeft &&
            clientX < EloffsetLeft + elW &&
            clientY > EloffsetTop &&
            clientY < EloffsetTop + 100
          ) {
            // 如果是头部在此就不做任何动作，以上有绑定header.onmousedown = moveDown;
            content.style.border = '2px solid #999'
          } else {
            document.onmousemove = function (e) {
              e.preventDefault() // 移动时禁用默认事件
              // content.style.border = '2px solid #999'
              // 左侧鼠标拖拽位置
              if (clientX > EloffsetLeft && clientX < EloffsetLeft + 10) {
                // 往左拖拽
                if (clientX > e.clientX) {
                  modal.style.width = elW + (clientX - e.clientX) * 1 + 'px'
                }
                // 往右拖拽
                if (clientX < e.clientX) {
                  if (!(modal.clientWidth < minWidth)) {
                    modal.style.width = elW - (e.clientX - clientX) * +'px'
                  }
                }
              }
              // 右侧鼠标拖拽位置
              if (
                clientX > EloffsetLeft + elW - 10 &&
                clientX < EloffsetLeft + elW
              ) {
                // 往左拖拽
                if (clientX > e.clientX) {
                  if (modal.clientWidth < minWidth) {
                    // modal.style.width = elW - (clientX - e.clientX) * 2 + 'px';
                  } else {
                    modal.style.width = elW - (clientX - e.clientX) * 2 + 'px'
                  }
                }
                // 往右拖拽
                if (clientX < e.clientX) {
                  modal.style.width = elW + (e.clientX - clientX) * 2 + 'px'
                }
              }
              // 底部鼠标拖拽位置
              if (
                ELscrollTop + clientY > EloffsetTop + elH - 30 &&
                ELscrollTop + clientY < EloffsetTop + elH
              ) {
                // 往上拖拽
                if (clientY > e.clientY) {
                  if (!(modal.clientHeight < minHeight)) {
                    modal.style.height = elH - (clientY - e.clientY) + 'px'
                  } else {
                    modal.style.height = elH - (clientY - e.clientY) + 'px'
                  }
                }
                // 往下拖拽
                if (clientY < e.clientY) {
                  modal.style.height = elH + (e.clientY - clientY) + 'px'
                }
              }
            }
            // 拉伸结束
            document.onmouseup = function (e) {
              content.style.border = 'unset'
              document.onmousemove = null
              document.onmouseup = null
            }
          }
          modal.onmouseup = function (e) {
            content.style.border = 'unset'
          }
        }
      }
    })
  },
  update: (el, bindings, vnode) => {
    if (!bindings.value) {
      return
    }
    Vue.nextTick(() => {
      console.log(vnode)
      // const { visible } = vnode.componentInstance
      // if (!visible) return
      const modal = el.getElementsByClassName('ant-modal')[0]
      const content = el.getElementsByClassName('ant-modal-content')[0]
      const header = el.getElementsByClassName('ant-modal-header')[0]
      const body = el.getElementsByClassName('ant-modal-body')[0]
      const footer = el.getElementsByClassName('ant-modal-footer')[0]
      const fileView = el.getElementsByClassName('material-ui')[0]
      // 弹框可拉伸最小宽高
      const minWidth = 400
      const minHeight = 300
      // 初始非全屏
      let isFullScreen = false
      // 初始非最小化
      let isMinScreen = false

      // //当前宽高
      let nowWidth = 0
      // //当前顶部高度
      let nowMarginTop = 0
      // 全屏按钮
      content.insertAdjacentHTML(
        'beforeEnd',
        `<button class="ant-modal-max" type="button">
              <span class="ant-modal-close-x"><i aria-label="图标: switcher" class="anticon anticon-switcher"><svg viewBox="64 64 896 896" data-icon="switcher" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M752 240H144c-17.7 0-32 14.3-32 32v608c0 17.7 14.3 32 32 32h608c17.7 0 32-14.3 32-32V272c0-17.7-14.3-32-32-32zm-40 600H184V312h528v528zm168-728H264c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h576v576c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V144c0-17.7-14.3-32-32-32zM300 550h296v64H300z"></path></svg></i></span>
              </button>`
      )
      content.insertAdjacentHTML(
        'beforeEnd',
        `<button class="ant-modal-min" type="button">
              <span class="ant-modal-close-x"><i aria-label="图标: minus" class="anticon anticon-minus"><svg viewBox="64 64 896 896" data-icon="minus" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg></i></span>
              </button>`
      )
      const changeBig = el.querySelector('.ant-modal-max')
      const changeSmall = el.querySelector('.ant-modal-min')
      // 给弹窗加上overflow auto；不然缩小时框内的标签可能超出dialog；
      modal.style.overflow = 'auto'
      // 清除选择头部文字效果
      // header.onselectstart = new Function("return false");
      // 头部加上可拖动cursor
      header.style.cursor = 'move'
      // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
      const sty = modal.currentStyle || window.getComputedStyle(modal, null)
      const moveDown = e => {
        // 鼠标按下，计算当前元素距离可视区的距离
        const disX = e.clientX - header.offsetLeft
        const disY = e.clientY - header.offsetTop
        // 获取到的值带px 正则匹配替换
        let styL, styT
        // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
        if (sty.left.includes('%')) {
          styL =
            +document.body.clientWidth * (+sty.left.replace(/%/g, '') / 100)
          styT =
            +document.body.clientHeight * (+sty.top.replace(/%/g, '') / 100)
        } else {
          styL = +sty.left.replace(/\px/g, '')
          styT = +sty.top.replace(/\px/g, '')
        }
        document.onmousemove = function (e) {
          // 通过事件委托，计算移动的距离
          const l = e.clientX - disX
          const t = e.clientY - disY
          // 移动当前元素
          modal.style.left = `${l + styL}px`
          modal.style.top = `${t + styT}px`
          // 将此时的位置传出去
          // binding.value({x:e.pageX,y:e.pageY})
        }
        document.onmouseup = function (e) {
          document.onmousemove = null
          document.onmouseup = null
        }
      }
      header.onmousedown = moveDown
      // 最大化
      changeBig.onclick = e => {
        isMinScreen = false // 全屏时取消最小化
        body.style.display = 'block'
        if (isFullScreen === false) {
          nowWidth = modal.clientWidth
          nowMarginTop = modal.offsetTop
          modal.style.left = 0
          modal.style.top = 0
          modal.style.width = '100VW'
          modal.style.height = '100VH'
          content.style.height = '100VH'
          fileView.style.height = '95VH'
          modal.style.marginTop = 0
          isFullScreen = true
          header.style.cursor = 'initial'
          header.onmousedown = null
        } else {
          modal.style.width = nowWidth + 'px'
          modal.style.height = 'auto'
          modal.style.top = nowMarginTop + 'px'
          content.style.height = '758px'
          body.style.height = '700px'
          fileView.style.height = '700px'
          isFullScreen = false
          header.style.cursor = 'move'
          header.onmousedown = moveDown
        }
      }

      // 最小化
      changeSmall.onclick = e => {
        if (isMinScreen) {
          isMinScreen = !isMinScreen
          body.style.display = 'block'
          footer.style.display = 'block'
          content.style.height = '758px'
        } else {
          isMinScreen = !isMinScreen
          body.style.display = 'none'
          footer.style.display = 'none'
          content.style.height = '55px'
        }
      }
      modal.onmousemove = function (e) {
        if (
          e.clientX > modal.offsetLeft + modal.clientWidth - 10 ||
          modal.offsetLeft + 10 > e.clientX
        ) {
          modal.style.cursor = 'w-resize'
        } else if (
          el.scrollTop + e.clientY >
          modal.offsetTop + modal.clientHeight - 30
        ) {
          modal.style.cursor = 's-resize'
        } else {
          modal.style.cursor = 'default'
          modal.onmousedown = null
        }
        modal.onmousedown = e => {
          const clientX = e.clientX
          const clientY = e.clientY
          const elW = modal.clientWidth
          const elH = modal.clientHeight
          const EloffsetLeft = modal.offsetLeft
          const EloffsetTop = modal.offsetTop
          modal.style.userSelect = 'none'
          const ELscrollTop = el.scrollTop
          // 判断点击的位置是不是为头部
          if (
            clientX > EloffsetLeft &&
            clientX < EloffsetLeft + elW &&
            clientY > EloffsetTop &&
            clientY < EloffsetTop + 100
          ) {
            // 如果是头部在此就不做任何动作，以上有绑定header.onmousedown = moveDown;
            content.style.border = '2px solid #999'
          } else {
            document.onmousemove = function (e) {
              e.preventDefault() // 移动时禁用默认事件
              // content.style.border = '2px solid #999'
              // 左侧鼠标拖拽位置
              if (clientX > EloffsetLeft && clientX < EloffsetLeft + 10) {
                // 往左拖拽
                if (clientX > e.clientX) {
                  modal.style.width = elW + (clientX - e.clientX) * 1 + 'px'
                }
                // 往右拖拽
                if (clientX < e.clientX) {
                  if (!(modal.clientWidth < minWidth)) {
                    modal.style.width = elW - (e.clientX - clientX) * +'px'
                  }
                }
              }
              // 右侧鼠标拖拽位置
              if (
                clientX > EloffsetLeft + elW - 10 &&
                clientX < EloffsetLeft + elW
              ) {
                // 往左拖拽
                if (clientX > e.clientX) {
                  if (modal.clientWidth < minWidth) {
                    // modal.style.width = elW - (clientX - e.clientX) * 2 + 'px';
                  } else {
                    modal.style.width = elW - (clientX - e.clientX) * 2 + 'px'
                  }
                }
                // 往右拖拽
                if (clientX < e.clientX) {
                  modal.style.width = elW + (e.clientX - clientX) * 2 + 'px'
                }
              }
              // 底部鼠标拖拽位置
              if (
                ELscrollTop + clientY > EloffsetTop + elH - 30 &&
                ELscrollTop + clientY < EloffsetTop + elH
              ) {
                // 往上拖拽
                if (clientY > e.clientY) {
                  if (!(modal.clientHeight < minHeight)) {
                    modal.style.height = elH - (clientY - e.clientY) + 'px'
                  } else {
                    modal.style.height = elH - (clientY - e.clientY) + 'px'
                  }
                }
                // 往下拖拽
                if (clientY < e.clientY) {
                  modal.style.height = elH + (e.clientY - clientY) + 'px'
                }
              }
            }
            // 拉伸结束
            document.onmouseup = function (e) {
              content.style.border = 'unset'
              document.onmousemove = null
              document.onmouseup = null
            }
          }
          modal.onmouseup = function (e) {
            content.style.border = 'unset'
          }
        }
      }
    })
  }
})

export { move }
